<template>
  <div>
    <van-nav-bar
      fixed
      left-arrow
      :title="myData.nickname"
      :placeholder="true"
      :safe-area-inset-top="true"
      @click-left="$router.go(-1)"
      @click-right="
        $router.push({ path: '/editArticle', query: { type: 'add' } })
      "
    >
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
      <template #right>
        <!-- <van-icon name="weapp-nav" size="18" /> -->
      </template>
    </van-nav-bar>
    <div class="main">
      <van-tabs v-model:active="active" swipeable line-width="50%">
        <van-tab :title="'关注 ' + myData.smile">
          <van-search
            v-model="value"
            class="pl-0 pr-0"
            placeholder="请输入搜索关键词"
          />
          <div class="x_y_between">
            <span>我的关注</span>
            <span>综合排序<van-icon name="descending" class="ml-5"/></span>
          </div>
          <div class="smile">
            <div class="avatar x_y_between">
              <div class="flex x_y_center">
                <van-badge color="#FFCC30" :offset="['-5px', '44px']">
                  <van-image
                    round
                    width="50px"
                    height="50px"
                    :src="artcleInfo.avatarUrl"
                    fit="cover"
                    @click="actionShow = true"
                  />
                  <template #content>
                    v
                  </template>
                </van-badge>
                <div class="head ml-10">
                  <div class="nickname">{{ artcleInfo.nickname }}</div>
                  <div class="tips mt-5">
                    <span>
                      {{
                        artcleInfo.pushTime &&
                          artcleInfo.pushTime.substring(0, 10)
                      }}
                    </span>
                    <span class="ml-5">{{ artcleInfo.remarks }}</span>
                  </div>
                </div>
              </div>
              <div>
                <van-tag
                  type="primary"
                  size="medium"
                  class="smile"
                  @click.stop="follow()"
                >
                  <span v-if="artcleInfo.follow">已关注</span>
                  <span v-else><van-icon name="plus" /> 关注</span>
                </van-tag>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="'粉丝 ' + myData.friends">
          内容2
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRoute } from "vue-router";
import { Toast } from "vant";
import { use } from "@/api/api.js";

export default {
  name: "article",
  setup() {
    const state = reactive({
      myData: {},
      active: 1,
      followAry: [],
      fansAry: [],
      artcleInfo:{}
    });
    let route = useRoute();
    // 初始化关注列表
    const followList = async () => {
      const { data: res } = await use.followList();
      console.log("关注", res);
      if (res.status != 0) return Toast.fail(res.message);
      state.followAry = res.list;
    };
    // 初始化粉丝列表
    const fansList = async () => {
      const { data: res } = await use.fansList();
      console.log("粉丝", res);
      if (res.status != 0) return Toast.fail(res.message);
      state.fansAry = res.list;
    };
    // 初始化加载
    onMounted(() => {
      // 初始化用户信息
      state.myData = JSON.parse(localStorage.getItem("user"));
      // 初始化进入口tab
      if (route.query.type == "smile") state.active = 0;
      if (route.query.type == "friends") state.active = 1;
      // 初始化加载信息
      followList();
      fansList();
    });
    return {
      ...toRefs(state),
      followList,
      fansList,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar--fixed {
  z-index: 1001;
}
.main {
  padding: 0 10px;
  box-sizing: border-box;
  /deep/.van-tabs__wrap {
    height: 0.8rem;
  }
  /deep/.van-tab__pane {
    height: calc(100vh - 46px - 0.8rem);
    overflow-y: auto;
    .smile {
      margin-top: 10px;
      height: calc(100% - 80px);
      // background: chartreuse;
      overflow-y: auto;
    }
    .avatar {
      height: 50px;
      .nickname {
        font-size: 16px;
      }
      .tips {
        font-size: 12px;
        color: #999;
      }
      .smile {
        padding: 5px 15px;
        border-radius: 15px;
      }
    }
  }
}
</style>
